<template>
  <div>
    <MHeader>书籍</MHeader>
    <section class="container">
      <ul>
       <router-link :to="{name:'detail',params:{bid:book.bookId}}" v-for="(book,index) in pageAjax.books"   :key="index"  tag="li">
          <img :src="book.bookCover" alt="">
          <div>
            <h3>{{book.bookName}}</h3>
            <p>{{book.bookInfo}}</p>
            <span>￥{{book.bookPrice}}</span>
          </div>
          <button @click.stop="removeData(book.bookId)" class="rem" v-if="true">删除</button>
          <button @click.stop="CollectData(book.bookId)" class="coll" v-else>收藏</button>
       </router-link>
      </ul>
    </section>
  </div>
</template>
<script>
  import MHeader from '../base/MHeader.vue';
  import {getBooks,removeBook,getDown} from '../api';
  export default {
    data() {
      return {
        pageAjax:{
          page:true,//是否还有页
          time:'',//定时器
          books: [],//加载的数据
        },
      }
    },
    created() {
      this.getData();
      window.addEventListener('scroll',()=>{
        this.$pageAjax(this.pageAjax,getDown);
      });
    },
    methods: {
      async getData() {
        this.pageAjax.books = await getBooks();
      },
      async removeData(id){
        //删除前台
        this.pageAjax.books = this.pageAjax.books.filter(item=>item.bookId!==id);
        await removeBook(id);//删除某一项
      },
      CollectData(id){
         this.pageAjax.books.filter(item=>item.bookId!==id);
      },
      finlD(id){
        this.$router.push('/detail/id')
      }
    },
    components: {MHeader}
  };
</script>
<style scoped lang="scss">
  @import "../css/container.scss";
  body,html{background:#eee;}
.container{
  position:relative;
  top:0.7rem;
  margin-bottom: 1.2rem;
  ul{
    li{
      div{
        &>*{
          overflow:hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
          margin-bottom:0.1rem;
        }
        h3{font-weight:600;}
        p{font-size:18px}
        span{color:$cs}
      }
      button.rem{
        width:0.8rem;
        height:0.4rem;
        font-weight:600;
        &.rem{
          background:#F15453;
          color:#0f0f0f;
        }
        &.coll{
          background:#00B262;
          color:#fff;
        }
      }
    }
  }
}
</style>
